<script setup>

import NavMenu from "@/components/utils/navMenu.vue";
import AUTnavMM from "@/components/utils/AUTnavMM.vue";
import {onBeforeMount, onMounted, ref} from "vue";
import {AApprovedSong, AArriveSong, aGetBanSong, aGetUnapprovedSong} from "@/api/api.js";
import {ElNotification} from "element-plus";
import router from "@/router/index.js";

const childRef = ref(null)
let isCollapse = ref(true)
let default_index = '3'

let changeflag = ref(0)
let defaultLibrary = ref('歌曲审核')
let admin = ref({
  admin_ID: '',
  admin_Name: '未登录',
})
let banSongList = ref([
  {
    song_ID: '',
    song_name: '',
    singer_name: '',
    album_name: '',
    created_Time: '',
    song_Directory: '',
  },
])
let AuditSongLists = ref([
      {
        song_ID: '',
        song_name: '',
        singer_name: '',
        album_name: '',
        created_Time: '',
      },
    ]
)

onBeforeMount(() => {
  selectAllAuditSong()
  selectAllBanSong()
})

function selectAllAuditSong() {
  aGetUnapprovedSong().then(resp => {
    if (resp.data.code === 200) {
      setTimeout(() => {
        AuditSongLists.value = resp.data.data
      }, 100)
    } else {
      console.log(resp.data.msg)
    }

  })
}

function selectAllBanSong() {
  aGetBanSong().then(resp => {
    if (resp.data.code === 200) {
      setTimeout(() => {
        banSongList.value = resp.data.data
      }, 100)
    } else {
      console.log(resp.data.msg)
    }

  })
}

function handleCommand(command) {
  if (command == 0) { //不可替换为===
    defaultLibrary.value = '歌曲审核'
    changeflag.value = 0
  } else {
    defaultLibrary.value = '歌曲上架'
    changeflag.value = 1
  }
}

function ApprovedSong(song_ID, song_Name) {
  AApprovedSong(song_ID, song_Name).then(resp => {
    if (resp.data.code === 200) {
      ElNotification({
        title: song_Name + "审核通过！",
        type: 'success',
        duration: 1000,
        position: 'top-left',
      })
      selectAllAuditSong()
    } else {
      console.log(resp.data.msg)
    }
  })
}

const toSongME = (song_ID) => {
  router.push({
    path: '/songME',
    query: {song_ID}
  })
}

function ArriveSong(song_ID, song_Name) {
  AArriveSong(song_ID, song_Name).then(resp => {
    if (resp.data.code === 200) {
      ElNotification({
        title: song_Name + "审核通过！",
        type: 'success',
        duration: 1000,
        position: 'top-left',
      })
      selectAllAuditSong()
    } else {
      console.log(resp.data.msg)
    }
  })
}
</script>

<template>
  <AUTnavMM></AUTnavMM>
  <div class="mmContent">
    <nav-menu ref="childRef" :default_index="default_index"></nav-menu>
    <div class="sysInfo_mod">
      <el-scrollbar>
        <div class="box_mod" id="box_md">
          <div class="list_header">
            <span>{{ defaultLibrary }}</span>
            <el-dropdown trigger="click" @command="handleCommand">
              <el-icon class="el-icon--right">
                <arrow-down/>
              </el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command=0>歌曲审核</el-dropdown-item>
                  <el-dropdown-item command=1>歌曲上架</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div>
            <div class="list_body">
              <div class="list_title">
                <span style="width: 5%;text-align: center;">#</span>
                <span style="width: 30%;">名称</span>
                <span style="width: 20%;">作者</span>
                <span style="width: 20%;">专辑</span>
                <span style="width: 15%;">时间</span>
                <span style="width: 10%;"></span>
              </div>
              <div class="list_form" v-if="changeflag === 0">
                <el-scrollbar height="605px">
                  <div class="songList_mod" v-for="(item, index) in AuditSongLists" @dblclick="toSongME(item.song_ID)">
                    <div class="songList">
                      <div style="width: 5%;text-align: center;">{{ index + 1 }}</div>
                      <div style="width: 30%;" class="songName">
                        {{ item.song_name }}
                      </div>
                      <div style="width: 20%;">{{ item.singer_name }}</div>
                      <div style="width: 20%;">{{ item.album_name }}</div>
                      <div style="width: 15%;">{{ item.created_Time }}</div>
                      <div style="width: 10%;">
                        <el-button type="warning" plain @click="toSongME(item.song_ID)">详情</el-button>
                      </div>
                    </div>
                  </div>
                </el-scrollbar>
              </div>

              <div class="list_form" v-if="changeflag === 1">
                <el-scrollbar>
                  <div class="songList_mod" v-for="(item, key) in banSongList">
                    <div class="songList">
                      <div style="width: 5%;text-align: center;">{{ key + 1 }}</div>
                      <div style="width: 30%;" class="songName">
                        {{ item.song_name }}
                      </div>
                      <div style="width: 20%;">{{ item.singer_name }}</div>
                      <div style="width: 20%;">{{ item.album_name }}</div>
                      <div style="width: 15%;">{{ item.created_Time }}</div>
                      <div style="width: 10%;">
                        <el-button type="success" plain @click="toSongME(item.song_ID)">详情</el-button>
                      </div>
                    </div>
                  </div>
                </el-scrollbar>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<style scoped>
.box_mod {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0px 0px 6px 1px #ececec;
  margin-bottom: 20px;
  padding: 20px 30px;
}

.mmContent {
  display: flex;
  background-color: #f5f6fa;
  max-height: 836px;
}

/*系统资料模块*/
.sysInfo_mod {
  width: 80%;
  padding-left: 20px;
  padding-top: 20px;
}

#box_md :deep(.el-row) {
  justify-content: space-around;
  align-items: center;
  height: 150px;
}

.songList_mod {
  width: 100%;
}

.list_header {
  height: 50px;
  width: 100%;
  border-bottom: 2px solid #e5ebf7;
  box-sizing: border-box;
  padding-left: 20px;
  display: flex;
  align-items: center;
}

.list_header span {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 15px;
}

.list_body {
  width: 100%;
  height: 100%;
}

.list_title {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #edeff2;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  border-bottom: 2px solid rgb(243, 242, 242);
  margin-bottom: 10px;
}

.list_form {
  width: 100%;
  max-height: 605px;
}

.songList_mod {
  display: flex;
  flex-direction: column;
}

.songList {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #f7f7f7;
  border-bottom: 2px solid rgb(243, 242, 242);
}

.songList:hover {
  background-color: #ececec;
}

/*下拉菜单的样式修改*/
.el-dropdown-menu__item:not(.is-disabled):focus {
  background-color: #fff4ec;
  color: #e58c43;
}

.songName {
  display: flex;
  align-items: center;
}

</style>